<template>
    <div>
        <div class="detail-list" v-for="item of categoryList" :key="item.id" >
            <div class="list-item" >
                <i class="icon"></i><span>{{item.title}}</span>
            </div>
            <div v-if="item.children" class="child-item">
                <detail-list :categoryList = "item.children"></detail-list>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"DetailList",
    props:{
        categoryList:{
            type:Array
        }
    }
}
</script>
<style lang="scss" scoped>
    .list-item{
        display: flex;
        line-height: 60px;
        padding: 20px;
        border-bottom: 1px solid #ccc;
        .icon{
            width: 50px;
            height: 50px;
            display: block;
            background: url("~@/assets/icon/detail.png" ) no-repeat;
            background-size: 50px;
            background-position:5px -52px;
            margin-right:30px;
        };
    }
    .child-item{
    margin-left: 30px;
    }

</style>
